<template>
  <div class="classifyDeatils">
    <div class="labelTitle">{{labelName}}</div>
    <article-list v-if="labelName" :whereType="{articleType:labelName}"></article-list>
    <div style="margin:20px"></div>
  </div>
</template>
<script>
import { useRoute } from 'vue-router'
import ArticleList from '@/components/articleList/ArticleList.vue'
import { onMounted, reactive, toRefs } from 'vue'
export default {
  components: { ArticleList },
  setup (props) {
    const route = useRoute()
    const data = reactive({
      labelName: ''
    })
    onMounted(() => {
      data.labelName = route.params.labelName
    })
    return {
      ...toRefs(data)
    }
  }
}
</script>

<style lang="scss" scoped>
.classifyDeatils {
  min-height: 300px;
  max-width: 800px;
  margin: auto;
}
.labelTitle {
  position: absolute;
  top: 350px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 40px;
}
</style>